டாக்குமென்ட் பிக்சர்-இன்-பிக்சர்: உள்ளடக்க மேலடுக்கு குறித்த ஒரு ஆழமான பார்வை

டாக்குமென்ட் பிக்சர்-இன்-பிக்சர் API என்பது ஒரு சக்திவாய்ந்த வலை API ஆகும். இது டெவலப்பர்களை வெவ்வேறு தாவல்கள் மற்றும் பயன்பாடுகளில் தொடர்ந்து இருக்கும் மிதக்கும் வீடியோ சாளரங்களை உருவாக்க அனுமதிக்கிறது. இது வெறும் வீடியோ பிளேபேக்கிற்கு அப்பாற்பட்டது, வீடியோவின் மீது தனிப்பயன் உள்ளடக்கம் மற்றும் ஊடாடும் கூறுகளை மேலடுக்கு செய்யும் திறனை வழங்குகிறது. இது பயனர் அனுபவங்களை மேம்படுத்துவதற்கும், ஈர்க்கக்கூடிய வலைப் பயன்பாடுகளை உருவாக்குவதற்கும் பரந்த அளவிலான சாத்தியங்களைத் திறக்கிறது.

டாக்குமென்ட் பிக்சர்-இன்-பிக்சர் என்றால் என்ன?

பாரம்பரியமாக, பிக்சர்-இன்-பிக்சர் (PiP) முதன்மையாக வீடியோ பிளேபேக்கிற்குப் பயன்படுத்தப்பட்டது. டாக்குமென்ட் பிக்சர்-இன்-பிக்சர் API இந்த செயல்பாட்டை நீட்டிக்கிறது. இது பிரதான ஆவணத்திலிருந்து தனியாக, முற்றிலும் புதிய சாளரத்தை உருவாக்க உங்களை அனுமதிக்கிறது, அதில் நீங்கள் எந்த HTML உள்ளடக்கத்தையும் காண்பிக்கலாம். இந்த உள்ளடக்கத்தில் வீடியோக்கள், படங்கள், உரை, ஊடாடும் கட்டுப்பாடுகள் மற்றும் முழுமையான வலைப் பயன்பாடுகளும் அடங்கும்.

இதை மற்ற பயன்பாடுகளின் மேல் மிதக்கும் ஒரு சிறிய உலாவி சாளரமாகக் கருதுங்கள். இது ஒரு நிலையான மற்றும் அணுகக்கூடிய பயனர் இடைமுகத்தை வழங்குகிறது. பயனர்கள் மற்ற பணிகளைச் செய்யும்போது தொடர்ந்து தகவல்களைக் கண்காணிக்க அல்லது ஒரு குறிப்பிட்ட கட்டுப்பாடுகளுடன் தொடர்பு கொள்ள வேண்டிய சூழல்களுக்கு இது குறிப்பாக பயனுள்ளதாக இருக்கும்.

முக்கிய அம்சங்கள் மற்றும் நன்மைகள்

• தனிப்பயன் உள்ளடக்கம்: PiP சாளரத்தில் வீடியோக்களை மட்டுமல்ல, எந்த HTML உள்ளடக்கத்தையும் காண்பிக்கலாம்.
• ஊடாடும் கூறுகள்: பயனர் தொடர்புகளை செயல்படுத்த பொத்தான்கள், படிவங்கள் மற்றும் பிற ஊடாடும் கட்டுப்பாடுகளைச் சேர்க்கலாம்.
• நிலையான சாளரம்: பிரதான ஆவணம் மூடப்பட்டாலோ அல்லது அதிலிருந்து விலகிச் சென்றாலோ PiP சாளரம் தொடர்ந்து தெரியும்.
• மேம்பட்ட பயனர் அனுபவம்: பயனர்கள் முக்கியமான தகவல்களையோ அல்லது கட்டுப்பாடுகளையோ அணுக ஒரு தடையற்ற மற்றும் வசதியான வழியை வழங்குகிறது.
• மேம்படுத்தப்பட்ட பல்பணி: பயனர்கள் PiP சாளரத்தை ஒரே நேரத்தில் கண்காணிக்கும்போதோ அல்லது அதனுடன் தொடர்பு கொள்ளும்போதோ மற்ற பணிகளைச் செய்ய அனுமதிக்கிறது.

பயன்பாட்டு நிகழ்வுகள் மற்றும் எடுத்துக்காட்டுகள்

1. வீடியோ கான்பரன்சிங் மற்றும் ஒத்துழைப்பு

பங்கேற்பாளர்களின் வீடியோக்களை ஒரு சிறிய சாளரத்தில் காண்பிக்க டாக்குமென்ட் பிக்சர்-இன்-பிக்சர்-ஐப் பயன்படுத்தும் ஒரு வீடியோ கான்பரன்சிங் பயன்பாட்டைக் கற்பனை செய்து பாருங்கள். இது பயனர்கள் மற்ற ஆவணங்கள் அல்லது பயன்பாடுகளை உலாவும்போது தொடர்ந்து ஒத்துழைக்க அனுமதிக்கிறது. அவர்கள் ஒரு தனிப்பட்ட விளக்கக்காட்சி, ஆவணம் அல்லது விரிதாளில் வேலை செய்யும்போது தங்கள் சக ஊழியர்களைப் பார்க்கவும் கேட்கவும் முடியும்.

எடுத்துக்காட்டு: ஜப்பானில் உள்ள ஒரு திட்ட மேலாளர், திட்டத் திட்டங்களை ஒரே நேரத்தில் மதிப்பாய்வு செய்யும்போது, அமெரிக்காவில் நடக்கும் ஒரு கூட்டத்தை இதைப் பயன்படுத்தி கண்காணிக்க முடியும்.

2. ஊடக கண்காணிப்பு மற்றும் ஸ்ட்ரீமிங்

செய்தி நிறுவனங்கள் மற்றும் ஊடக அமைப்புகள் டாக்குமென்ட் பிக்சர்-இன்-பிக்சர்-ஐப் பயன்படுத்தி, பயனர்களுக்கு நிகழ்நேர செய்தி ஊட்டங்கள், பங்குச் சந்தை நிலவரங்கள் அல்லது சமூக ஊடகப் புதுப்பிப்புகளைக் காட்டும் ஒரு மிதக்கும் சாளரத்தை வழங்கலாம். இது பயனர்கள் தொடர்ந்து தாவல்கள் அல்லது பயன்பாடுகளுக்கு இடையில் மாறாமல் தகவல்களைத் தெரிந்துகொள்ள அனுமதிக்கிறது.

எடுத்துக்காட்டு: லண்டனில் உள்ள ஒரு நிதி ஆய்வாளர் ஒரு சந்தை அறிக்கையை எழுதும்போது PiP சாளரத்தில் பங்கு விலைகளைக் கண்காணிக்கலாம்.

3. கேமிங் மற்றும் கேம் ஸ்ட்ரீமிங்

கேம் டெவலப்பர்கள் டாக்குமென்ட் பிக்சர்-இன்-பிக்சர்-ஐப் பயன்படுத்தி கேம் புள்ளிவிவரங்கள், அரட்டை சாளரங்கள் அல்லது கட்டுப்பாட்டுப் பலகைகளை ஒரு மிதக்கும் சாளரத்தில் காட்டலாம். இது கேமர்கள் தங்கள் விளையாட்டிற்கு இடையூறு விளைவிக்காமல் முக்கியமான தகவல்களையோ அல்லது கட்டுப்பாடுகளையோ எளிதாக அணுக அனுமதிக்கிறது.

எடுத்துக்காட்டு: தென் கொரியாவில் ஒரு தொழில்முறை கேமர் ஒரு கேம் விளையாடும்போது தனது ஸ்ட்ரீமிங் மேலடுக்கு மற்றும் அரட்டை சாளரத்தை PiP-ல் காண்பிக்கலாம்.

4. உற்பத்தித்திறன் மற்றும் பணி மேலாண்மை

பணி மேலாண்மைப் பயன்பாடுகள் டாக்குமென்ட் பிக்சர்-இன்-பிக்சர்-ஐப் பயன்படுத்தி பணிகள், நினைவூட்டல்கள் அல்லது காலக்கெடு ஆகியவற்றின் பட்டியலை ஒரு மிதக்கும் சாளரத்தில் காண்பிக்கலாம். இது பயனர்கள் ஒழுங்கமைக்கப்பட்டு தங்கள் முன்னுரிமைகளில் கவனம் செலுத்த உதவுகிறது.

எடுத்துக்காட்டு: பிரேசிலில் உள்ள ஒரு தொலைதூரப் பணியாளர் பல்வேறு திட்டங்களில் பணிபுரியும் போது, தனது தினசரிப் பணிகளின் பட்டியலை PiP-ல் வைத்திருக்கலாம்.

5. மின்-கற்றல் மற்றும் ஆன்லைன் படிப்புகள்

ஆன்லைன் கற்றல் தளங்கள் டாக்குமென்ட் பிக்சர்-இன்-பிக்சர்-ஐப் பயன்படுத்தி பாடப் பொருட்கள், குறிப்புகள் அல்லது முன்னேற்ற டிராக்கர்களை ஒரு மிதக்கும் சாளரத்தில் காண்பிக்கலாம். இது மாணவர்கள் மற்ற வலைத்தளங்கள் அல்லது பயன்பாடுகளை உலாவும்போது தொடர்ந்து கற்க அனுமதிக்கிறது.

எடுத்துக்காட்டு: இந்தியாவில் உள்ள ஒரு மாணவர் ஒரு தனி ஆவணத்தில் குறிப்புகளை எடுக்கும்போது PiP-ல் ஒரு விரிவுரையைக் காணலாம்.

டாக்குமென்ட் பிக்சர்-இன்-பிக்சர்-ஐ செயல்படுத்துதல்

ஜாவாஸ்கிரிப்ட் பயன்படுத்தி டாக்குமென்ட் பிக்சர்-இன்-பிக்சர்-ஐ எப்படி செயல்படுத்துவது என்பது பற்றிய ஒரு அடிப்படை கண்ணோட்டம் இதோ:

1. உலாவி ஆதரவைச் சரிபார்க்கவும்: உலாவி டாக்குமென்ட் பிக்சர்-இன்-பிக்சர் API-ஐ ஆதரிக்கிறதா என்பதை சரிபார்க்கவும்.
2. ஒரு பொத்தான் அல்லது தூண்டுதலை உருவாக்கவும்: PiP செயல்பாட்டைத் தூண்டும் ஒரு பொத்தான் அல்லது பிற உறுப்பை உங்கள் வலைப்பக்கத்தில் சேர்க்கவும்.
3. PiP சாளரத்தைத் திறக்கவும்: ஒரு புதிய PiP சாளரத்தைத் திறக்க documentPictureInPicture.requestWindow() முறையைப் பயன்படுத்தவும்.
4. PiP சாளரத்தை நிரப்பவும்: PiP சாளரத்தில் HTML உள்ளடக்கத்தை மாறும் வகையில் உருவாக்க மற்றும் இணைக்க ஜாவாஸ்கிரிப்ட் பயன்படுத்தவும்.
5. நிகழ்வுகளைக் கையாளவும்: PiP சாளரத்தை நிர்வகிக்க resize மற்றும் close போன்ற நிகழ்வுகளைக் கவனிக்கவும்.

குறியீடு எடுத்துக்காட்டு

இந்த எடுத்துக்காட்டு டாக்குமென்ட் பிக்சர்-இன்-பிக்சர்-இன் ஒரு எளிய செயல்பாட்டைக் காட்டுகிறது:

// உலாவியின் ஆதரவைச் சரிபார்க்கவும்
if ("documentPictureInPicture" in window) {
  const pipButton = document.getElementById('pipButton');
  const video = document.getElementById('myVideo');

  pipButton.addEventListener('click', async () => {
    try {
      // PiP சாளரத்தைத் திறக்கவும்
      const pipWindow = await documentPictureInPicture.requestWindow();

      // PiP சாளரத்தை உள்ளடக்கத்துடன் நிரப்பவும்
      pipWindow.document.body.innerHTML = `
        <video src="${video.src}" controls autoplay muted></video>
        <p>பிக்சர்-இன்-பிக்சரில் இயங்குகிறது!</p>
      `;

      // சாளரம் மூடப்படுவதற்கான நிகழ்வு கேட்பியைச் சேர்க்கவும்
      pipWindow.addEventListener('unload', () => {
        console.log('PiP சாளரம் மூடப்பட்டது');
      });

    } catch (error) {
      console.error('பிக்சர்-இன்-பிக்சர் சாளரத்தைத் திறப்பதில் பிழை:', error);
    }
  });
} else {
  console.log('இந்த உலாவியில் டாக்குமென்ட் பிக்சர்-இன்-பிக்சர் ஆதரிக்கப்படவில்லை.');
}

விளக்கம்:

• குறியீடு முதலில் documentPictureInPicture API உலாவியால் ஆதரிக்கப்படுகிறதா என்று சரிபார்க்கிறது.
• பின்னர் அது PiP-ஐத் தூண்டும் பொத்தான் மற்றும் வீடியோ உறுப்புக்கான குறிப்புகளைப் பெறுகிறது.
• பொத்தானில் ஒரு நிகழ்வு கேட்பி சேர்க்கப்பட்டுள்ளது. கிளிக் செய்தவுடன், அது ஒரு புதிய PiP சாளரத்தைத் திறக்க documentPictureInPicture.requestWindow()-ஐ அழைக்கிறது.
• PiP சாளரத்தின் document.body-இன் innerHTML பண்பு, வீடியோ உறுப்பு மற்றும் ஒரு பத்தி உரையைச் சேர்க்க அமைக்கப்பட்டுள்ளது. டெம்ப்ளேட் லிட்டரல்களைப் பயன்படுத்தி வீடியோவின் src பண்பு தப்பிக்கப்படுவதைக் கவனியுங்கள்.
• PiP சாளரம் மூடப்படும்போது ஒரு செய்தியைப் பதிவு செய்ய ஒரு நிகழ்வு கேட்பி சேர்க்கப்பட்டுள்ளது.
• PiP திறக்கும் செயல்பாட்டின் போது ஏற்படக்கூடிய விதிவிலக்குகளைப் பிடிக்க பிழை கையாளுதல் சேர்க்கப்பட்டுள்ளது.

சிறந்த நடைமுறைகள் மற்றும் கருத்தாய்வுகள்

• பயனர் அனுபவம்: தெளிவான மற்றும் உள்ளுணர்வுமிக்க பயனர் இடைமுகத்துடன் PiP சாளரத்தை வடிவமைக்கவும். உள்ளடக்கம் எளிதில் படிக்கக்கூடியதாகவும் அணுகக்கூடியதாகவும் இருப்பதை உறுதிசெய்யவும்.
• செயல்திறன்: வளப் பயன்பாட்டைக் குறைக்கவும், சீரான செயல்திறனை உறுதிசெய்யவும் PiP சாளரத்தில் உள்ளடக்கத்தை மேம்படுத்தவும். தேவையற்ற அனிமேஷன்கள் அல்லது சிக்கலான ரெண்டரிங்கைத் தவிர்க்கவும்.
• அணுகல்தன்மை: மாற்றுத்திறனாளிகள் PiP சாளரத்தை அணுகுவதை உறுதிசெய்யவும். படங்களுக்கு மாற்று உரை, வீடியோக்களுக்கு தலைப்புகள் மற்றும் விசைப்பலகை வழிசெலுத்தல் ஆகியவற்றை வழங்கவும்.
• பாதுகாப்பு: குறுக்கு-தள ஸ்கிரிப்டிங் (XSS) தாக்குதல்களைத் தடுக்க PiP சாளரத்தில் காட்டப்படும் எந்தவொரு பயனர் உருவாக்கிய உள்ளடக்கத்தையும் சுத்திகரிக்கவும்.
• குறுக்கு-உலாவி இணக்கத்தன்மை: இணக்கத்தன்மையை உறுதிசெய்ய உங்கள் செயல்பாட்டை வெவ்வேறு உலாவிகளில் சோதிக்கவும். பழைய உலாவிகளுக்கு ஆதரவளிக்க பாலிஃபில்ஸ் அல்லது ஷிம்களைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும்.
• அனுமதிகள்: பயனர் தனியுரிமையைக் கவனத்தில் கொள்ளவும். தேவையான வளங்களுக்கான அணுகலை மட்டுமே கோரவும், உங்களுக்கு அவை ஏன் தேவை என்பதைத் தெளிவாக விளக்கவும்.
• சாளர அளவு மற்றும் நிலைப்படுத்தல்: பயனர்கள் PiP சாளரத்தின் அளவையும் நிலையையும் தனிப்பயனாக்க அனுமதிக்கவும். திரையின் வெவ்வேறு பகுதிகளுக்கு சாளரத்தை நறுக்குவதற்கான விருப்பங்களை வழங்குவதைக் கருத்தில் கொள்ளவும்.

உலாவி ஆதரவு

டாக்குமென்ட் பிக்சர்-இன்-பிக்சர் தற்போது கூகுள் குரோம் மற்றும் மைக்ரோசாப்ட் எட்ஜ் போன்ற குரோமியம் அடிப்படையிலான உலாவிகளில் ஆதரிக்கப்படுகிறது. மற்ற உலாவிகளில் ஆதரவு மாறுபடலாம்.

உலாவி இணக்கத்தன்மை குறித்த மிகவும் புதுப்பித்த தகவல்களுக்கு எப்போதும் Can I use வலைத்தளத்தைப் பார்க்கவும்.

எதிர்கால மேம்பாடுகள்

டாக்குமென்ட் பிக்சர்-இன்-பிக்சர் API இன்னும் வளர்ந்து வருகிறது, மேலும் எதிர்கால மேம்பாடுகள் பின்வருவனவற்றை உள்ளடக்கியிருக்கலாம்:

• மேம்படுத்தப்பட்ட நிகழ்வு கையாளுதல்: PiP சாளரத்தின் மீது நுணுக்கமான கட்டுப்பாட்டை அனுமதிக்க மிகவும் வலுவான நிகழ்வு கையாளும் திறன்கள்.
• மேம்பட்ட ஸ்டைலிங் விருப்பங்கள்: CSS-ஐப் பயன்படுத்தி PiP சாளரத்தை ஸ்டைலிங் செய்வதில் அதிக நெகிழ்வுத்தன்மை.
• பிற API-களுடன் ஒருங்கிணைப்பு: வெப் ஷேர் API மற்றும் அறிவிப்புகள் API போன்ற பிற வலை API-களுடன் தடையற்ற ஒருங்கிணைப்பு.

முடிவுரை

டாக்குமென்ட் பிக்சர்-இன்-பிக்சர் API வலை மேம்பாட்டிற்கான ஒரு புரட்சியாகும், இது பயனர் அனுபவங்களை மேம்படுத்துவதற்கும் ஈர்க்கக்கூடிய வலைப் பயன்பாடுகளை உருவாக்குவதற்கும் ஒரு சக்திவாய்ந்த வழியை வழங்குகிறது. அதன் திறன்களைப் பயன்படுத்துவதன் மூலம், டெவலப்பர்கள் தனிப்பயன் உள்ளடக்கத்தைக் காட்டும், ஊடாடும் கட்டுப்பாடுகளை வழங்கும் மற்றும் பல்பணி திறன்களை மேம்படுத்தும் மிதக்கும் சாளரங்களை உருவாக்க முடியும். API தொடர்ந்து বিকশিতடைந்து பரந்த உலாவி ஆதரவைப் பெறுவதால், இது நவீன மற்றும் புதுமையான வலைப் பயன்பாடுகளை உருவாக்குவதற்கான ஒரு முக்கிய கருவியாக மாற உள்ளது.

இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள அம்சங்கள், செயல்படுத்தல் விவரங்கள் மற்றும் சிறந்த நடைமுறைகளைப் புரிந்துகொள்வதன் மூலம், டெவலப்பர்கள் டாக்குமென்ட் பிக்சர்-இன்-பிக்சரின் முழு திறனையும் வெளிக்கொணர்ந்து, தங்கள் உலகளாவிய பார்வையாளர்களுக்கு உண்மையிலேயே குறிப்பிடத்தக்க பயனர் அனுபவங்களை உருவாக்க முடியும்.

மேலும் அறிய

• கூகுள் குரோம் டெவலப்பர்கள்: டாக்குமென்ட் பிக்சர்-இன்-பிக்சர்
• web.dev: டாக்குமென்ட் பிக்சர்-இன்-பிக்சர் API-ஐப் பயன்படுத்துதல்
• Can I use: டாக்குமென்ட் பிக்சர்-இன்-பிக்சர்